<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3163994_cz3767yime9/iconfont.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        position: relative;
        /* height: 2000px; */
    }

    header {
        background-color: #fd0505;
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
    }

    .iconfont.icon-caidan {
        font-size: 30px;
        color: #fff;
        margin-right: 15px;
    }

    .search {
        flex: 1;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 15px;
        padding: 0 15px;
    }

    .jd {
        margin-top: 7px;
        width: 30px;
        height: 30px;

    }

    .iconfont.icon-jingdong {
        font-weight: 700;
        color: red;
        font-size: 20px;
    }

    .iconfont.icon-31sousuo {
        padding-left: 8px;
        font-size: 18px;
        border-left: 1px solid #aaaaaa;
    }

    header input {
        margin-top: 3px;
        height: 16px;
        border: none;
        outline: none;
        padding-left: 8px;
    }

    header button {
        margin-left: 10px;
        background: #fd0505;
        color: #fff;
        border: none;
    }

    .banner {
        display: flex;
        height: 250px;
        width: 100%;
        background: url(./img/header-background.png) no-repeat;
        justify-content: center;
        align-items: flex-end
    }

    .banner img {
        width: 90%;
        height: 75%;
        border-radius: 20px;
    }

    .nh {
        height: 120px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nh img {
        height: 100%;
    }

    .fenlei {
        height: 178px;
        background: #bbbbbb;
        display: flex;
        flex-wrap: wrap;
      justify-items: left;
        align-items: center;
    }
    .fenlei .tu{
        margin-top: 5px;
      width: 20%;
      height: 50%;
      position: relative;
      
      
    }
    .fenlei img{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        width: 50%;
        text-align: center;
    }
    .tu p{
        margin-top: 50px;
        font-size: 12px;
        color: #666666;
        text-align: center;
    }
    .sp{
        margin-top: 20px;
        display: flex;
       flex-wrap: wrap;
       justify-content: space-around;
    }
    .sp .sp-item{
        padding: 8px;
        width: 48%;
        height: 201px;
        border-radius: 10px;
        background-color: silver;
        margin-bottom: 10px;
    }
    .sp-item img{
        width: 100%;
        height: 60%;
    }
    .last{ width: 100%;
            margin-top: 20px;
            /* font-size: 14px; */
            text-align: center;
            display: flex;
            list-style: none;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            background-color: whitesmoke;
        }
        .last span{
            font-size: 25px;
        }
        .last p{
            font-size: 12px;
        }
</style>

<body>
    <header>
        <span class="iconfont icon-caidan"></span>
        <div class="search">
            <div class="jd">
                <span class="iconfont icon-jingdong"></span>
            </div>
            <span class="iconfont icon-31sousuo"></span>
            <input type="text" placeholder="网络机顶盒">
        </div>
        <button>登录</button>
    </header>
    <div class="banner">
        <img src="./img/banner.jpg" alt="">
    </div>
    <div class="nh">
        <img src="./img/zuo.png!q70.png" alt="">
        <img src="./img/动图.gif" alt="">
        <img src="./img/右.png!q70.png" alt="">
    </div>
    <div class="fenlei">
        <div class="tu">
            <img src="./img/iteam-1.png" alt="">
                <p>京东超市</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-2.png" alt="">
            <p>数码电器</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-3.png" alt="">
            <p>京东服饰</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-4.png" alt="">
            <p>京东超市</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-5.png" alt="">
            <p>数码电器</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-6.png" alt="">
            <p>数码电器</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-7.png" alt="">
            <p>京东服饰</p>
        </div>
        <div class="tu">
           <img src="./img/iteam-5.png" alt="">
            <p>数码电器</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-9.png" alt="">
            <p>京东超市</p>
        </div>
        <div class="tu">
            <img src="./img/iteam-10.png" alt="">
            <p>京东服饰</p>

        </div>
    </div>
        <div class="sp">
            <div class="sp-item">
                <img src="./img/main-4.png" alt="">
                    <h4>闪魔</h4>
                    <p>¥20</p>
            </div>
            <div class="sp-item">
                <img src="./img/main-4.png" alt="">
                    <h4>闪魔</h4>
                    <p>¥20</p>
            </div>
            <div class="sp-item">
                <img src="./img/main-4.png" alt="">
                    <h4>闪魔</h4>
                    <p>¥20</p>
            </div>
            <div class="sp-item">
                <img src="./img/main-4.png" alt="">
                    <h4>闪魔</h4>
                    <p>¥20</p>
            </div>
        </div>
        <footer>
            <ul class="last">
                <li class="last-item">
                    <span class="iconfont icon-shouye"></span>
                        <p>首页</p>
                </li>
                <li class="last-item">
                    <span class="iconfont icon-fenlei"></span>
                        <p>分类</p>
                </li>
                <li class="last-item">
                    <span class="iconfont icon-jiangjia"></span>
                        <p>惊喜</p>
                </li>
                <li class="last-item">
                    <span class="iconfont icon-gouwuchekong"></span>
                        <p>购物车</p>
                </li>
                <li class="last-item">
                    <span class="iconfont icon-jurassic_user"></span>
                        <p>我的</p>
                </li>
            </ul>
        </footer>
</body>

</html>